<template>
  <div class="home pl32 pr32">
    <div class="left-box box-sizing-border pt16 flex flex-column">
      <div class="importAmountEchart-box">
        <cBox
          style="height: 100%;"
          :title="'近五年进口额'"
          :subheading="'（亿美元）'">

          <div class="chart-box">
            <ImportAmountEchart></ImportAmountEchart>
          </div>
        </cBox>
      </div>

      <div class="imported-this-year-box flex flex-column space-between">
        <ImportedThisYear style="width: 100%;height: 48%;"></ImportedThisYear>
        <SaledThisYear style="width: 100%;height: 48%;"></SaledThisYear>
      </div>

      <div></div>
      <div></div>
    </div> 
    <div class="center-box box-sizing-border pt32 flex flex-column space-between">
      <div class="world-map">
        <worldMapEchart ref="worldMapEchartRef" @on-child-event="childEvent"/>

        <div class="legend-list flex align-items-center">
          <div class="legend-item flex flex-column align-items-center">
            <span class="item-text">全球合作伙伴</span>
            <span class="item-num">546097</span>
          </div>

          <div class="legend-item flex flex-column align-items-center ml32">
            <span class="item-text">全球合作伙伴</span>
            <span class="item-num">546097</span>
          </div>
        </div>
      </div>
      
      <div class="map-list-box">
        <WordMapList></WordMapList>
      </div>
    </div>
    <div class="right-box">
      <div class="region">
        <cBox
          style="height: 100%;"
          :title="'进口国别'"
          :subheading="'（亿美元）'"
          >
          <div >
            <ImportCountry></ImportCountry>
          </div>
        </cBox>
      </div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import worldMapEchart from '@/components/echarts/worldMapEchart.vue';
  import WordMapList from '@/components/other/wordMapList.vue';
  import cBox from '@/components/other/cardBox.vue';
  import ImportAmountEchart from '@/components/echarts/ImportAmountEchart.vue';
  import ImportedThisYear from '@/components/other/importedThisYear.vue'
  import SaledThisYear from '@/components/other/saledThisYear.vue';

  import ImportCountry from '@/components/other/ImportCountry.vue';
  
  import { ref, onMounted, Ref } from 'vue';

  let msg:Ref<string> = ref('');
  const worldMapEchartRef = ref();

  const childEvent = (data: any) => {
    console.log(data);
    msg.value = data;
  };

  onMounted(()=> {

  })
</script>

<style lang="scss" scoped>
.home{
  display: flex;
  flex-wrap: nowrap;
  background-color: #080f1c;
  
  .left-box{
    width: 25%;
    height: 100vh;

    .importAmountEchart-box{
      width: 100%;
      height: 30%;

      .chart-box{
        height: 100%;
      }
    }

    .imported-this-year-box{
      margin-top: 0.5rem;
      height: 25%;
    }
  }

  .center-box{
    width: 50%;
    height: 100vh;

    .world-map{
      position: relative;
      height: 60%;
    }

    .legend-list{
      position: absolute;
      z-index: 10;
      left: 35%;
      bottom: -5%;

      .legend-item{
        padding: 0 1.875rem;
        padding-top: 1rem;
        background-color: #1130628f;
        border: 2px solid #397ecf70;

        .item-text{
          font-size: 1rem;
          color: #c1d6e7;
        }

        .item-num{
          font-size: 1.5625rem;
          color: #17f3fc;
        }
      }
    }

    .map-list-box{
      width: 100%;
      height: 35%;
    }
  }

  .right-box{
    width: 25%;
    height: 100vh;
    .region{
      height:33.33%
    }
  }
}
</style>
